<template>
  <view>
    <!-- 收货地址组件 -->
    <my-address></my-address>
    
    <!-- 订单标题区域 -->
    <view class="order-title">
      <!-- 图标 -->
      <uni-icons type="list" size="18"></uni-icons>
      <!-- 文本 -->
      <text class="order-title-text">订单</text>
    </view>
    
    <!-- 订单商品信息区域 -->
    <view class="order-goods-list">
      <view v-for="(goods,i) in goods_list" :key="i">
        <my-goods :goods="goods" :showCount="true"></my-goods>
        
      </view>
    </view>
    
    <!-- 结算组件 -->
    <view class="settle-container">
      <!-- 合计 -->
      <view class="amount-box">
        合计:<text class="amount">￥{{total_price}}</text>
      </view>
      <!-- 结算 -->
      <view class="btn-settle" @click="settlement">结算({{checked_count}})</view>
    </view>
    
  </view>
</template>

<script>
  import {mapGetters,mapState} from 'vuex'
  
  export default {
    data() {
      return {
        // 测试用
        queryObj:{
          // 上面两个参数测试用，无意义
          query:'',
          cid:6,
        },
        
        // 假的订单总价
        total_price:1000,
        
        // 一共几个商品
        checked_count:0,
        
        // 商品列表
        goods_list:[],
      };
    },
    
    computed:{
      ...mapGetters('m_user',['addstr']),
      ...mapState('m_order',['userChooseSizes']),
    },
    
    onLoad(options){
      // console.log(options.goods_id)
      
      // 从未支付订单过来，获取订单的商品信息
      if(options.hasOwnProperty('order_id')){
        // console.log(options.order_id)
        this.getOrderDetail(options)
      }
      
      
      // 从商品详情的立即购买按钮过来
      if(options.hasOwnProperty('goods_id')){
        // console.log(options.goods_id)
        this.setOrderDetail(options)
        
        // console.log(this.getUserChooseSizes)  
      }
    },
    
    methods:{
      async getOrderDetail(order_id){
        // 这里用从后端获取订单详情的接口
        // 先用个假的
        // 发起请求
        const {data:res} = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
        
        this.goods_list = res.message.goods
        
        // 加假数据
        this.goods_list[0].goods_count = 1
        
        
        
        // 计算商品总数
        this.checkedCount()
      },
      
      // 点击结算按钮
      settlement(){

        uni.$http.post('',{
          order_price:this.order_price,
          consignee_addr:this.addstr,
          goods:this.goods_list.map(x => ({
                  goods_id:x.goods_id,
                  goods_number:x.goods_count,
                  goods_price:x.goods_price
                }))
          
        })
      },
      
      // 计算商品总数
      checkedCount(){
        // console.log(this.goods_list)
        
        this.checked_count = this.goods_list.reduce((total,item) => {return total += item.goods_count},0)
        
        
        // console.log(this.checked_count)
      },
      
      // 点击立即购买按钮过来后用于设置订单细节的函数
      async setOrderDetail(options){
        
        // console.log(options.goods_sizes)
        
        // 这里拿那个获取商品详情的接口,用options.goods_id获取
        // 先用个假的
        
        const {data:res} = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
        
        this.goods_list = res.message.goods
        
        // 使其为数字
        this.goods_list[0].goods_count = (options.goods_count - 0)
        
        console.log(this.userChooseSizes)  
        
        // 设定规格
        this.goods_list[0].goods_sizes = this.userChooseSizes
        
        //计算商品总数
        this.checkedCount()
      }
      
      
    },
    

    
    
  }
</script>

<style lang="scss">
.order-title{
  height:40px;
  display: flex;
  align-items: center;
  padding-left: 5px;
  border-bottom: 1px solid #efefef;
  
  .order-title-text{
    font-size: 14px;
    margin-left: 10px;
  }

}

  .settle-container{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding-left: 5px;
    
    .amount-box{
      .amount{
        color:#C00000;
        font-weight: bold;
      }
    }
    
    .btn-settle{
      background-color: #C00000;
      height: 50px;
      color:white;
      line-height: 50px;
      padding:0 10px;
      min-width: 100px;
      text-align: center;
    }
  }
</style>
